<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>首页</title>
		<link rel="stylesheet" type="text/css" href="css/Bootstrap/css/bootstrap.min.css" />
		<link rel="stylesheet" type="text/css" href="css/Bootstrap/css/bootstrap-theme.min.css" />
		<link rel="stylesheet" type="text/css" href="css/all_css.css" />
		<link rel="stylesheet" type="text/css" href="lib/weui.css" />
		<link rel="stylesheet" type="text/css" href="css/weui/jquery-weui.css" />
		<link rel="stylesheet" type="text/css" href="css/gundong.css" />
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<style type="text/css">
			#index_main {
				max-width: 640px;
				min-width: 320px;
				width: 100%;
				margin: 0px auto;
			}
			
			footer li a {
				display: block;
				margin-top: 8px;
			}
			
			footer li a div img {
				width: 32px;
				height: 26px;
			}
			
			footer li a p {
				font-size: 0.9em;
			}
			
			#index_head_title {
				position: relative;
				top: 4px;
				text-align: center;
				color: #FFFFFF;
				font-size: 1.6em;
				font-family: "宋体";
			}
			
			#mapBtn {
				display: block;
			}
			
			#mapBtn img {
				width: 25px;
				position: relative;
				left: 7px;
			}
			
			.index_head_left {
				float: left;
				width: 100%;
			}
			
			#myCarousel img {
				width: 100%;
				height: 100%;
			}
			
			#myCarousel ol li {
				margin: 0px 0.3em;
				width: 6px;
				height: 6px;
			}
			
			#indexGnBtn ul {
				display: table;
				margin-top: 8px;
				width: 100%;
				/*border: 1px solid;*/
			}
			
			#indexGnBtn ul li {
				float: left;
				border: 1px solid #eaeaea;
				width: 25%;
				display: table;
				/*----在js中通过获取获取屏幕高度获取每个li高度 并调整padding以自适应*/
			}
			
			#indexGnBtn ul li a {
				display: block;
				height: 100%;
				display: table-cell;
				vertical-align: middle;
				text-align: center;
			}
			
			#indexGnBtn ul li p {
				margin-top: 6px;
				color: #666666;
				font-family: "微软雅黑";
				text-align: center;
				font-size: 0.85em;
			}
			
			#indexGnBtn img {
				width: 45%;
				margin-top: 5px;
			}
			/*----新闻字体大小----*/
			
			.item div {
				font-size: 1.1em;
			}
			/*停止新闻滚动条滚动*/
			
			.noB {
				border: none !important;
			}
			
			#index_mid {
				padding-top: 70px;
			}
		</style>
	</head>

	<body ontouchstart>
		<div id="index_main">
			<div class="index_head">
				<div class="index_head_left">
					<p id="index_head_title">畅行吉林</p>
				</div>
				<!--<div class="index_head_right">
					<a id="mapBtn" href="show_map.html">
						<img src="img/index/map.png" />
					</a>
				</div>-->

			</div>
			<div id="index_mid">
				<div id="myCarousel" class="carousel slide">
					<!-- 轮播（Carousel）指标 -->
					<ol class="carousel-indicators">
						<li data-target="#myCarousel" data-slide-to="0" id="firstOl" class="active"></li>
						<li data-target="#myCarousel" data-slide-to="1" id="secondOl"></li>
						<li data-target="#myCarousel" data-slide-to="2"></li>
					</ol>
					<!-- 轮播（Carousel）项目 -->
					<div class="carousel-inner">
						<div class="item active" id="startLBpic">
							<img src="img/index/yjzPic.gif" />
						</div>
						<!--<div class="item active">
							<img src="img/index/jingyuetan2.jpg" alt="First slide">
							<div class="carousel-caption">2017年五一长春净月潭旅游景区人满为患</div>
						</div>
						<div class="item">
							<img src="img/index/gaosuyongdu.jpg" alt="Second slide">
							<div class="carousel-caption">抚长高速松江河至长白山段大面积拥堵</div>
						</div>
						<div class="item">
							<img src="img/index/renminguangchang.jpg.png" alt="Third slide">
							<div class="carousel-caption">小长假期间长春市内交通压力骤增</div>
						</div>-->
					</div>

				</div>
				<div class="box" id="index_gd">
					<ul class="startGD" id="GD_ul">

					</ul>
				</div>
				<div id="indexGnBtn">
					<ul>
						<li id="moreBtn">
							<a href="application.html" class="yyBtn">
								<div>
									<img src="img/index/more.png" />
								</div>
								<p>更多</p>
							</a>
						</li>
					</ul>
				</div>

			</div>
			<footer>
				<li>
					<a href="#">
						<div>
							<img src="img/index/index__.png" />
						</div>
						<p style="color: #0070B4;">首页</p>
					</a>
				</li>
				<li>
					<a href="cxgh.html">
						<div>
							<img src="img/index/chuxingguihuazhengchang.png" />
						</div>
						<p>出行规划</p>
					</a>
				</li>
				<li>
					<a href="my.html">
						<div>
							<img src="img/index/my__normol.png" />
						</div>
						<p>我的出行</p>
					</a>
				</li>
			</footer>
		</div>
		<script src="js/jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/md5.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/back_end.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/weui/jquery-weui.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/appList.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/Bootstrap_js/js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
		<!--<script src="js/Bootstrap_js/js/npm.js" type="text/javascript" charset="utf-8"></script>-->
		<script src="js/swipe_hzs.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			var changyong = [];
			var allHeight = document.documentElement.clientHeight; //获取屏幕高度
			//			void plus.geolocation.getCurrentPosition(successCB, errorCB, option);
			//			// 扩展API加载完毕后调用onPlusReady回调函数 
			//			document.addEventListener('plusready', onPlusReady, false);
			//			// 扩展API加载完毕，现在可以正常调用扩展API
			//			function onPlusReady() {
			//				plus.geolocation.getCurrentPosition(function(p) {
			//					alert('Geolocation\nLatitude:' + p.coords.latitude + '\nLongitude:' + p.coords.longitude + '\nAltitude:' + p.coords.altitude);
			//					console.log('Geolocation info: ' + JSON.stringify(p));
			//				}, function(e) {
			//					console.log('Gelocation Error: code - ' + e.code + '; message - ' + e.message);
			//				});
			//			}

			function appendOftenApp() { //添加首页常用应用按钮节点li
				for(var i = 0; i < changyong.length; i++) {
					var li = $('<li></li>');
					var picHeight = (allHeight - 70 - 60) * 0.4;
					var boxHeight = (allHeight - 70 - 60) * 0.6 / 3;
					$(".item img").height(picHeight - 30);
					$(li).height(boxHeight);
					$("#moreBtn").height(boxHeight - 2);
					$("#moreBtn").before(li);
					var a = $('<a href="' + changyong[i].href + '" class="yyBtn" name="' + changyong[i].id + '"></a>');
					$(li).append(a);
					var div = $('<div><img src="' + changyong[i].src + '" /></div>');
					var p = $('<p>' + changyong[i].name + '</p>');
					$(a).append(div, p);
				}
			}

			function readData(flag) { //读取用户存储的常用应用
				//读取数据后台接口方法
				var userName = JSON.parse(localStorage.userJson)[0].username;
				//				console.log(userName);
				$.ajax({
					type: "post",
					url: Url,
					data: {
						"type": "application_info",
						"USERNAME": userName,
						"FLAG": flag //FLAG=true是管理员，FLAG=false是非管理员
					},
					async: false,
					cache: false,
					dataType: "jsonp", //数据类型为jsonp
					jsonp: "callbackparam", //服务端用于接收callback调用的function名的参数  
					jsonpCallback: "jsonpCallback1",
					success: function(data) {
						//console.log(data.DATA);
						if(data.DATA == "[]") {
							for(var i = 0; i < 11; i++) {
								var li = $('<li></li>');
								//设置每个li高度以及轮播图高度
								var picHeight = (allHeight - 70 - 60) * 0.4;
								var boxHeight = (allHeight - 70 - 60) * 0.6 / 3;
								$(".item img").height(picHeight - 30);
								$(li).height(boxHeight);
								$("#moreBtn").height(boxHeight - 2);
								$("#moreBtn").before(li);
								var a = $('<a href="' + appList[i].href + '" class="yyBtn" name="' + appList[i].id + '"></a>');
								$(li).append(a);
								var div = $('<div><img src="' + appList[i].src + '" /></div>');
								var p = $('<p>' + appList[i].name + '</p>');
								$(a).append(div, p);
							}
						} else {
							changyong = JSON.parse(eval(data.DATA)[0].COMMON);
							appendOftenApp();
						};
						getPic();
					},
					error: function(data) {
						$.alert("连接超时，请稍后再试", "提示");
					}
				});
			}
			document.addEventListener("plusready", function() {
				// 注册返回按键事件
				plus.key.addEventListener('backbutton', function() {

					return $.confirm("是否退出程序？", "畅行吉林", function() {
						void plus.runtime.quit();
					});
				}, false);
			});

			//禁用安卓手机物理返回键
			XBack = {};

			(function(XBack) {
				XBack.STATE = 'x - back';
				XBack.element;

				XBack.onPopState = function(event) {
					event.state === XBack.STATE && XBack.fire();
					XBack.record(XBack.STATE); //初始化事件时，push一下  
				};

				XBack.record = function(state) {
					history.pushState(state, null, location.href);
				};

				XBack.fire = function() {
					var event = document.createEvent('Events');
					event.initEvent(XBack.STATE, false, false);
					XBack.element.dispatchEvent(event);
				};

				XBack.listen = function(listener) {
					XBack.element.addEventListener(XBack.STATE, listener, false);
				};

				XBack.init = function() {
					XBack.element = document.createElement('span');
					window.addEventListener('popstate', XBack.onPopState);
					XBack.record(XBack.STATE);
				};

			})(XBack); // 引入这段js文件  

			XBack.init();
			XBack.listen(function() {});

			$(function() {
//				getGeocode();
				//				alert(window.location+"");
				$("#startLBpic").height((allHeight - 70 - 60) * 0.4 - 30);
				//未登录时
				if(!localStorage.userJson) {
					for(var i = 0; i < 11; i++) {
						var li = $('<li></li>');
						var boxHeight = (allHeight - 70 - 60) * 0.6 / 3;
						$(li).height(boxHeight);
						$("#moreBtn").height(boxHeight - 2);
						$("#moreBtn").before(li);
						var a = $('<a href="' + appList[i].href + '" class="yyBtn" name="' + appList[i].id + '"></a>');
						$(li).append(a);
						var div = $('<div><img src="' + appList[i].src + '" /></div>');
						var p = $('<p>' + appList[i].name + '</p>');
						$(a).append(div, p);
					}
					getPic();

				} else {
					var f = JSON.parse(localStorage.userJson)[0].HYNYH; //判断是否为管理员登录
					if(f == "3") {
						readData(true);
					} else {
						readData(false);
					}
				};
				$("#myCarousel").swipe({
					swipeLeft: function() {
						$(this).carousel('next');
					},
					swipeRight: function() {
						$(this).carousel('prev');
					},
				});
				//获取全部高速阻断信息
				//				getAllFreeway();
				//				alert($(".active img").height()+"-----"+$(".active img").width());
			});
			$(document).ready(function() {
				$("#myCarousel").carousel({
					interval: 5000
				}); //每隔5秒自动轮播
			});

			function btnHeight() {
				var picHeight = (allHeight - 70 - 60) * 0.4;
				//				var boxHeight = (allHeight - 55 - 60) * 0.6 / 3;
				$(".item").height(picHeight - 30);
				//				$("#indexGnBtn ul li").height(boxHeight);
			}
			$("body").mousedown(function() {
				$(".box ul").addClass("stopGD");
			});
			$("body").mouseup(function() {
				$(".box ul").removeClass("stopGD");
			});
			//获取轮播图
			function getPic() {
				$.ajax({
					type: "post",
					url: Url,
					data: {
						"type": "LBpicture"
					},
					async: false,
					cache: false,
					dataType: "jsonp", //数据类型为jsonp
					jsonp: "callbackparam", //服务端用于接收callback调用的function名的参数  
					jsonpCallback: "jsonpCallback1",
					success: function(data) {
						//						console.log(data);
						if(data.MSG == "成功") {
							var d = data.DATA;
							var m = data.MDATA;
							if(isEncrypt(d, m)) {
								var picArr = eval(d);
								//console.log(picArr);
								for(var i = 0; i < picArr.length; i++) {
									var picDiv = $('<div class="item"></div>'); //轮播图区域div
									var srcStr = picArr[i].IMG_BASE64; //src赋值
									var img = $('<img src="' + srcStr + '" alt="Second slide">'); //轮播图片
									//							var main = $('<div class="carousel-caption">' + picArr[i].TITLE + '</div>');
									var picH = (allHeight - 70 - 60) * 0.4 - 30; //高度按照比例40%
									if(i == 0) {
										//设置第一个图片为轮播开始图
										$("#startLBpic img").attr("src", srcStr).height(picH);
									} else {
										$(picDiv).append(img);
										var picH = (allHeight - 70 - 60) * 0.4 - 30;
										$(picDiv).height(picH);
										$("#startLBpic").after(picDiv);
									}

									//							<div class="item">
									//							<img src="data:image;base64," alt="Second slide">
									//							<div class="carousel-caption">抚长高速松江河至长白山段大面积拥堵</div>
									//						</div>
								};
							} else {
								errMD();
							}
						} else {
							$.alert("图片获取失败，请检查网络设置", "提示");
						}

						//						$("#startLBpic").remove();
						//加载滚动新闻
						getAllFreeway();
					},
					error: function(data) {
						$.alert("连接超时，请稍后再试", "提示");
					}
				});
			};
			//获取全部高速路况信息方法
			function getAllFreeway() {
				$.ajax({
					type: "post",
					url: Url,
					data: {
						"type": "plan_traffic_info"
					},
					async: false,
					cache: false,
					dataType: "jsonp", //数据类型为jsonp
					jsonp: "callbackparam", //服务端用于接收callback调用的function名的参数  
					jsonpCallback: "jsonpCallback1",
					success: function(data) {
						if(data.CODE == "1") {
							var d = data.DATA;
							var m = data.MDATA;
							if(isEncrypt(d, m)) {
								d = eval(d);
								//将高速路况信息循环遍历到ul中
								for(var i = 0; i < d.length; i++) {
									var backtime = d[i].comebackTime;
									if(backtime == "") {
										backtime = d[i].intendingComebackTime;
									}
									var gslk;
									if(d[i].caseBewrite.substring(0, 1) == "请") {
										//当caseBewrite字段内容不全时，在它的前面加locality字段内容补全
										gslk = d[i].locality + "，" + d[i].caseBewrite;
									} else {
										gslk = d[i].caseBewrite;
									}
									var li = $('<li>高速名称： ' + d[i].roadName + ' 高速路况： ' + gslk + ' 开始时间： ' + d[i].begintime.substr(0, 16) + ' 预计结束： ' + backtime.substr(0, 16) + '</li>');
									$("#GD_ul").append(li);
								}
							} else {
								errMD();
							}
						} else {
							var nullLi = $('<li><img src="img/index/laba.png"/>暂时未能获取到高速路况信息</li>');
							$(nullLi).addClass("noB");
							$("#GD_ul").append(nullLi);
							$("#GD_ul").removeClass("startGD");
						};
					},
					error: function(data) {
						$.alert("连接超时，请稍后再试", "提示");
					}
				});
			}

//			//推送APP阻断信息推送
//			document.addEventListener("plusready", function() {
//				message = document.getElementById("message");
//				// 监听点击消息事件
//				plus.push.addEventListener("click", function(msg) {
//					// 判断是从本地创建还是离线推送的消息
//					switch(msg.payload) {
//						case "LocalMSG":
//							$.alert(msg.content, "阻断信息推送", function() {
//								window.location.href = "freeway.html";
//							});
//							break;
//						default:
//							$.alert(msg.content, "阻断信息推送", function() {
//								window.location.href = "freeway.html";
//							});
//							break;
//					}
//					// 提示点击的内容
//					plus.ui.alert(msg.content);
//					// 处理其它数据
//					logoutPushMsg(msg);
//				}, false);
//				// 监听在线消息事件
//				plus.push.addEventListener("receive", function(msg) {
//					if(msg.aps) { // Apple APNS message
//						outSet("接收到在线APNS消息：");
//					} else {
//						outSet("接收到在线透传消息：");
//					}
//					logoutPushMsg(msg);
//				}, false);
//			}, false);
		</script>
	</body>

</html>